<template>
  <!-- 定义一个用于容纳ECharts图表的div元素，id为chart-container1 -->
  <div id="chart-container1"></div>
</template>

<script>
// 导入ECharts库
import * as echarts from 'echarts';

export default {
  name: 'PieChart1',  // 组件的名称
  mounted() {
    // 组件挂载完成后初始化图表
    this.initChart();
    // 监听窗口的resize事件，调整图表大小
    window.addEventListener('resize', this.resizeChart);
  },
  beforeUnmount() {
    // 组件销毁前移除resize事件监听
    window.removeEventListener('resize', this.resizeChart);
    // 如果图表实例存在，销毁图表实例
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    // 初始化图表
    initChart() {
      // 获取图表容器的DOM元素
      const dom = document.getElementById('chart-container1');
      // 初始化ECharts实例
      this.myChart = echarts.init(dom);

      // 定义饼图的数据
      const data = [
        {value: 2, name: '药学'},
        {value: 3, name: '公共卫生与预防医学'},
        {value: 8, name: '中医学'},
        {value: 13, name: '生物医药工程'},
        {value: 33, name: '基础医学'},
        {value: 40, name: '临床医学'},
        {value: 1, name: '组织工程学'}
      ];

      // 计算数据的总和，用于计算百分比
      const total = data.reduce((sum, item) => sum + item.value, 0);

      // 定义图表的配置项
      const option = {
        title: {
          top: '2%',
          bottom: '2%',
          text: '一级学科项目占比',  // 图表的标题
          left: 'left',
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // 定义鼠标悬停时显示的提示信息，包括百分比
            const percent = ((params.value / total) * 100).toFixed(2);
            return `${params.name}: ${percent}%`;
          }
        },
        legend: {
          orient: 'horizontal',
          left: 'center',
          bottom: 0,
          width: '100%',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 10
        },
        series: [
          {
            name: '来源',  // 图表的系列名称
            type: 'pie',  // 图表类型为饼图
            radius: '68%',
            data: data,  // 设置图表的数据
            label: {
              formatter: function (params) {
                return `${params.percent.toFixed(0)}%`;  // 设置饼图标签的显示格式
              }
            },
            emphasis: {
              label: {
                fontSize: 11,
                fontWeight: 'bold'
              }
            },
            animation: true  // 初始动画
          }
        ]
      };

      // 使用配置项生成图表
      this.myChart.setOption(option);
    },
    // 调整图表大小
    resizeChart() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
    // 开始动画效果
    startAnimation() {
      if (this.myChart) {
        // 重新设置图表选项，以触发动画效果
        this.myChart.setOption(this.myChart.getOption(), true);
      }
    }
  }
};
</script>

<style scoped>
#chart-container1 {
  position: relative;
  width: 20vw;
  height: 24vw;
  background: url("@/assets/card3-3.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
</style>
